<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报表维护</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Safari浏览器添加到主屏幕（IOS） -->

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">

    <meta name="msapplication-TileColor" content="#62a8ea">
   <!-- <link href="./bootstrap.css" th:href="@{/bootstrap.css}" rel="stylesheet">-->
    <link href="./css/base/web-icon.css" th:href="@{/css/base/web-icon.css}" rel="stylesheet">
    <link href="./css/base/site.css" th:href="@{/css/base/site.css}" rel="stylesheet">
    <link href="./css/base/base.css" th:href="@{/css/base/base.css}" rel="stylesheet">
    <!-- 插件 CSS -->

    <script src="../public/js/vendor/jquery/jquery.min.js" th:src="@{/js/vendor/jquery/jquery.min.js}"></script>
    <script src="../public/js/vendor/jquery-validation/jquery.validate.min.js"
            th:src="@{/js/vendor/jquery-validation/jquery.validate.min.js}"></script>

    <link rel="stylesheet" href="../public/js/layui/css/layui.css" th:href="@{/js/layui/css/layui.css}" media="all">
    <script src="../public/js/layui/layui.all.js" th:src="@{/js/layui/layui.all.js}"></script>


</head>
<body>

    <div class="layui-row">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName"  id="userName" lay-verify="required" placeholder="请输入姓名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <select name="department" lay-verify="required"  id="department">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="phone" lay-verify="required" placeholder="请输入手机号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">

                    <button class="layui-btn" data-type="reload" lay-filter="" id="btn-search" name="btn-search">查询
                    </button>

                    <button type="reset" class="layui-btn " id="btn-add">新增</button>
                    <button type="reset" class="layui-btn " id="btn-del">删除</button>

                </div>
            </div>


        </form>
    </div>
    <div style="display: none" id="ShowDiv">
        <form class="layui-form" action="" id="addAndEidt">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="form-userName" lay-verify="required" placeholder="请输入用户名"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-block">
                        <select name="form-department" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="form-phone" lay-verify="required" placeholder="请输入手机号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色</label>
                    <div class="layui-input-block">
                        <select name="form-role" lay-verify="required">
                            <option value=""></option>
                            <option value="0">超级管理员</option>
                            <option value="1">科员</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="form-pwd" lay-verify="required" placeholder="请输入密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="form-sure-pwd" lay-verify="required" placeholder="请输入密码"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
           <!-- <div class="layui-row">
                <div class="layui-inline">
                    <button type="reset" class="layui-btn " id="btn-form-sure">确定</button>
                    <button type="reset" class="layui-btn layui-btn-normal" id="btn-form-cancel">取消</button>
                </div>
            </div>-->
        </form>
    </div>

    <div class="layui-row" style="float: right">
        <div class="layui-inline">

            <button class="layui-btn" data-type="reload" lay-filter="" id="btn-export" name="btn-export">导出
            </button>

            <button type="reset" class="layui-btn " id="btn-import" name="btn-import">导入</button>

        </div>
    </div>
    <div class="layui-row">


        <table id="userDt" lay-filter="userDt"></table>
        <script type="text/html" id="userInfo-toolbar">
            <a class="layui-btn layui-btn-xs" lay-event="edit" style="color: white">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" style="color: white">删除</a>
        </script>
    </div>
    <script th:inline="none">
        //Demo
        layui.use('form', function () {
            var form = layui.form;

            form.render();


        });

        layui.use(['layer', 'table'], function () {
            var table = layui.table;

              var obj =new Object()
            obj.userName=""
            obj.departCode=""
            obj.PageNum=1
            obj.PageSize=20

            table.render({
                elem: "#userDt",
                id: 'userId',
                height: 600,
                url: "/admin/allUserInfo",
                where: obj,
                method: "get",
                id: "userTable",
                page: true,
                cols: [[
                    {type: 'checkbox', width: 50},
                    {field: "userId", title: "用户Id", sort: false, hide: true, fixed: 'left', align: 'center'},
                    {field: "userName", title: "用户名", sort: false, fixed: 'left', align: 'center'},
                    {field: "phone", title: "手机号", sort: false, fixed: 'left', align: 'center'},
                    {field: "email", title: "邮箱", sort: false, fixed: 'left', align: 'center'},
                    {field: "departName", title: "部门", sort: false, fixed: 'left', align: 'center'},
                    {title: '操作', align: 'center', toolbar: '#userInfo-toolbar'}

                ]]


            });


            function reloadData() {
                var userName = $("#userName").val();
                var deparCode = $("#department").val();
                var phone = $("#phone").val()

                var obj =new Object()
                obj.userName=userName
                obj.departCode=deparCode
                obj.phone=phone
                obj.PageNum=1
                obj.PageSize=20
                table.reload({
                    where: obj
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

            //查询
            $('#btn-search').on('click', function () {
                var userName = $("#userName");
                var department = $("#department");
                var phone = $("#phone")
                reloadData();

            });
            //删除
            $("#btn-del").click(function () {
                table.on('checkbox(userDt)', function (obj) {
                    console.log(obj.checked); //当前是否选中状态
                    console.log(obj.data); //选中行的相关数据
                    console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                });
            })

            //导出
            $("#btn-export").click(function () {
                table.exportFile([]
                    , 'xls'); //默认导出 csv，也可以为：xls
            })

            //新增
            $("#btn-add").click(function () {
                //自定页

                layer.open({
                    title: '编辑用户信息',
                    type: 1,
                    area: ['600px', '600px'],

                    closeBtn: 1, //不显示关闭按钮
                    anim: 2,
                    btn:['确定','取消'],
                    shadeClose: true, //开启遮罩关闭
                    content: $("#ShowDiv").html(),
                    yes: function(index){
                        layer.close(index);
                        alert(1)
                    }
                });
            })


            //监听行工具事
            table.on('tool(userDt)', function (obj) {
                var data = obj.data;
                //console.log(obj)
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.prompt({
                        formType: 2
                        , value: data.email
                    }, function (value, index) {
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                    });
                }
            });
        })


    </script>
    </div>

</body>
</html>